<template>
  <div class="master-table table-container">
    <div class="table-wrapper">
      <el-table
        :data="dataList"
        stripe
        border
        :cell-style="setCellStyle"
        :header-cell-style="{backgroundColor: '#f5f7fa', color: '#606266', fontWeight: '600'}"
        class="responsive-table"
      >
        <el-table-column
          v-for="{ label, prop, width, fixed } in columnList"
          :key="prop"
          :label="label"
          :prop="prop"
          :min-width="width"
          align="center"
          :fixed="fixed"
        >
          <template #default="scope">
            <div
              v-if="
                currNav.level !== 1 &&
                prop !== 'grade_name' &&
                scope.row[prop] !== '/'
              "
              @click="toEditCell(scope.row, prop)"
              class="cell-content pointer"
            >
              <template v-if="scope.row[prop] !== ''">
                <div class="user-content">
                  <span>{{ scope.row[prop] }}</span>
                  <i class="el-icon-edit-outline edit-icon"></i>
                </div>
              </template>
              <el-button v-else type="primary" size="small" plain class="setting-btn" icon="el-icon-plus"> 
                设置
              </el-button>
            </div>
            <div v-else class="cell-content">
              {{ scope.row[prop] }}
            </div>
          </template>
        </el-table-column>
      </el-table>

      <SetRoleUser
        v-if="showEditCell"
        :settingInfo="settingInfo"
        :schoolId="schoolId"
        :currNav="currNav"
        @cancel="showEditCell = false"
        @update="onUpdate"
      />
    </div>
  </div>
</template>
<script>
import SetRoleUser from './SetRoleUser.vue';
export default {
  name: 'MasterTable',
  components: {
    SetRoleUser,
  },
  props: {
    masterDataList: { type: Array, required: true },
    currNav: { type: Object, required: true },
    schoolId: { type: Number, required: true },
  },
  data() {
    return {
      columnList: [],
      dataList: [],
      showEditCell: false,
      settingInfo: {},
    };
  },

  computed: {},
  mounted() {
    this.getColumnList();
    this.getDataList();
  },
  methods: {
    getColumnList() {
      if (this.currNav.level !== 3) {
        const list = this.masterDataList.map(({ RoleName }, index) => ({
          label: RoleName,
          prop: `column_${RoleName}_${index}`,
          width: '200px',
        }));
        this.columnList = list;
      } else {
        const subjectList = this.masterDataList[0].SubUserList;
        this.columnList = subjectList.map(({ SubjectId, SubjectName }) => ({
          label: SubjectName,
          prop: `column_${SubjectId}`,
          width: '200px',
        }));
        this.columnList.unshift({
          label: '年级',
          prop: 'grade_name',
          width: '200px',
          fixed: true,
        });
      }
    },
    getDataList() {
      if (this.currNav.level !== 3) {
        const row = {};
        this.masterDataList.forEach(({ RoleName, UserList }, index) => {
          row[`column_${RoleName}_${index}`] = UserList.map(
            (e) => e.UserName
          ).join('/');
        });
        this.dataList = [row];
      } else {
        this.dataList = this.masterDataList.map(
          ({ GradeId, GradeName, SubUserList }) => {
            const row = {
              grade_name: GradeName,
              grade_id: GradeId,
            };
            SubUserList.forEach(({ SubjectId, UserList }) => {
              row[`column_${SubjectId}`] =
                SubjectId === 0 && GradeId === 0
                  ? '/'
                  : UserList.map((e) => e.UserName).join('/');
            });
            return row;
          }
        );
      }
    },

    toEditCell(row, prop) {
      const columnIndex = prop.split('_').at(-1);
      if (this.currNav.level === 3) {
        const { GradeId, GradeName, SubUserList } = this.masterDataList.find(
          (e) => e.GradeId === row.grade_id
        );
        const {
          SubjectId: subject_id,
          SubjectName: subject_name,
          UserList: user_list,
        } = SubUserList[columnIndex];
        this.settingInfo = {
          grade_id: GradeId,
          grade_name: GradeName,
          subject_id,
          subject_name,
          user_list,
        };
      } else {
        const item = this.masterDataList[columnIndex];
        const { RoleId, RoleName, UserList } = item;
        this.settingInfo = {
          role_id: RoleId,
          role_name: RoleName,
          user_list: UserList,
        };
      }
      this.showEditCell = true;
    },
    onUpdate() {
      this.showEditCell = false;
      this.$emit('update');
    },
    setCellStyle({ rowIndex, columnIndex }) {
      if (columnIndex === 0 && this.currNav.level === 3) {
        // 第一列
        return { 
          backgroundColor: 'rgba(0, 156, 255, 0.06)',
          fontWeight: '500',
          color: '#303133'
        };
      }
      return {};
    },
  },
};
</script>
<style lang="less" scoped>
.master-table {
  width: 100%;
  height: 100%;
  
  :deep(.el-table) {
    .cell-content {
      padding: 8px 0;
      
      &.pointer {
        cursor: pointer;
        transition: background-color 0.2s;
        border-radius: 4px;
        
        &:hover {
          background-color: rgba(64, 158, 255, 0.08);
          
          .edit-icon {
            opacity: 1;
          }
        }
      }
      
      .user-content {
        display: flex;
        align-items: center;
        justify-content: center;
        
        .edit-icon {
          margin-left: 8px;
          font-size: 14px;
          color: #409EFF;
          opacity: 0;
          transition: opacity 0.2s;
        }
      }
    }
    
    .setting-btn {
      font-size: 12px;
      margin: 0;
      padding: 6px 12px;
    }
    
    .el-table__row {
      transition: all 0.2s;
      
      &:hover {
        background-color: #f5f7fa;
      }
    }
    
    .el-table__header {
      th {
        padding: 12px 0;
      }
    }
  }
}
</style>
